<template>
  <div class="wrap">

    <div class="table">
      <div style="font-size: 14px" class="mgb10">{{ $t('account.boundStore') }}（{{tableData.length}}）</div>
      <el-table
        border
        :data="tableData"
        v-loading="loading"

        :default-sort="defaultSort"
        @sort-change="handleSortChange"
      >
        <el-table-column
          prop="nickname"

          :label="$t('table.shopNames')"
          align="center"
        >
          <template slot-scope="{row}">
            <diy-link @click="showInfo(row)"> <span style="font-size: 12px">{{row.nickname}}</span></diy-link>
          </template>
        </el-table-column>
        <el-table-column
          prop="accountType"
          :label="$t('table.platform')"
          align="center"
          v-if="$store.getters.platformNum > 1"
        >
          <template slot-scope="{row}">
            <span :class="getPlatformTextColor(row.accountType)">{{row.accountType}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="remarkName"
          :label="$t('table.customName')"
          align="center"
        >
          <template slot-scope="{row}">
            {{row.remarkName || '-'}}
          </template>
        </el-table-column>
        <el-table-column
          prop="stickerOrderNum"
          :label="$t('table.stickerNumber')"
          align="center"
          sortable="custom"
          :sort-orders="sortOrders"
        >
          <template slot-scope="{row}">
            {{ attrNumber(row.stickerOrderNum) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="accountAttr"
          :label="$t('table.店铺属性')"
          align="center"
        >
          <template slot-scope="{row}">
            <template v-if="row.isCBT">
              {{$t('table.CBT')}}
            </template>
            <template v-else-if="row.accountTypeNum === 4">
              {{ row.siSiteName }}
            </template>
            <template v-else-if="row.accountTypeNum === 6">
              <template v-if="row.isTikTokUS === 1">
                {{$t('table.Local')}}
              </template>
              <template v-else>
                {{$t('table.跨境')}}
              </template>
            </template>
            <template v-else-if="row.accountTypeNum === 8">
              {{$t('table.跨境')}}
            </template>
            <template v-else>
              {{$t('table.Local')}}
            </template>
          </template>
        </el-table-column>
        <el-table-column
          prop="accountAttr"
          label="自动面单"
          align="center"
        >
          <template slot-scope="{row}">
            <template v-if="row.autoDownloadShipping">
              自动下载
            </template>
            <template v-else>
              不下载
            </template>
          </template>
        </el-table-column>
        <el-table-column
          prop="accountAttr"
          label="库存同步"
          align="center"
        >
          <template slot-scope="{row}">
            <template v-if="row.autoSyncInventory">
              自动同步
            </template>
            <template v-else>
              不同步
            </template>
          </template>
        </el-table-column>
        <el-table-column
          prop="accountAttr"
          label="同步预警线"
          align="center"
        >
          <template slot-scope="{row}">
            <template v-if="row.autoSyncInventory">
              {{row.autoSyncInventoryNum}}
            </template>
            <template v-else>
              -
            </template>
          </template>
        </el-table-column>

        <el-table-column
          prop="createTime"
          :label="$t('table.bindingTime')"
          align="center"
          sortable="custom"
          :sort-orders="sortOrders"
        >
          <template slot-scope="{row}">
            <template v-if="row.syncData">
              {{row.createTime}}
            </template>
            <template v-else>
              {{$t('account.collecting')}}
            </template>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('table.operate')"
          align="center"
        >
          <template slot-scope="{row}">
            <el-button @click="showInfo(row)" type="primary" :disabled="row.accountTypeNum === 3 && row.syncData === 0">  {{$t('common.edit')}}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="mgt20">
      <el-button type="primary" @click="bindMoreAccount">{{$t('account.bindMoreStores')}}</el-button>
      <el-button type="primary" @click="bindMoreCBTAccount" v-if="false">{{$t('account.绑定更多CBT店铺')}}</el-button>
    </div>


    <el-dialog
      :visible.sync="dialogForm"
      width="900px"
      :title="$t('account.storeDetails')"
    >
      <el-form
        ref="accountForm"
        :model="currentRow"
        label-width="160px"

      >
        <el-form-item
          :label="$t('table.shopNames')"
          prop="nickname"
        >
          {{ currentRow.nickname }}
        </el-form-item>
        <el-form-item
          :label="$t('table.customName')"
          prop="password"
        >
          <el-input v-model="currentRow.remarkName"></el-input>
          <span class="tips" style="color: #FC6347">{{$t('account.accountText1')}}</span>
        </el-form-item>

        <el-form-item :label="$t('自动下载面单设置')">
          <el-radio-group v-model="currentRow.autoDownloadShipping">
            <el-radio :label="false">{{ $t('不下载') }}</el-radio>
            <el-radio :label="true">{{ $t('自动下载') }}</el-radio>
          </el-radio-group>
          <div class="form-tips">{{ $t('美客多店铺出单后，根据此设置决定是否自动下载面单把订单状态变为“准备发货”，降低取消率，提升体验分。默认下载时间为订单同步5分钟后') }}</div>
        </el-form-item>

        <el-form-item :label="$t('自动同步前台库存设置')">
          <el-radio-group v-model="currentRow.autoSyncInventory">
            <el-radio :label="false">{{ $t('不同步') }}</el-radio>
            <el-radio :label="true">{{ $t('自动同步') }}</el-radio>
          </el-radio-group>
          <div class="form-tips" v-html="$t('开启自动同步后，根据下方设置的同步平台和预警线，设置当前系统发货的SKU出单将预扣系统的代发库存，并自动同步剩余库存到前台库存')"></div>
          <div class="form-tips">
            {{ $t('自动同步库存属于高风险操作，开启“自动同步”前请仔细阅读') }}
            <el-button type="text" @click="showStatement()">《{{ $t('自动同步前台库存风险提示') }}》</el-button>
          </div>
          <template v-if="currentRow.autoSyncInventory === true">
            <el-form-item :label="$t('同步平台')" label-width="100px" v-show="false">
              <el-checkbox-group v-model="currentRow.autoSyncInventoryPlatformList">
                <el-checkbox :label="systemPlatformList['1']">Mercado Libre</el-checkbox>
                <el-checkbox :label="systemPlatformList['4']">SHEIN</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item :label="$t('同步预警线')" label-width="100px">
              <el-input-number v-model="currentRow.autoSyncInventoryNum" :min="1" :max="99999"></el-input-number> {{ $t('代发库存') }}
            </el-form-item>
            <div class="form-tips">
              {{ $t('根据同步预警线设置的代发库存数量，代发库存在预警线上时每天0点同步一次；在预警线下时每售出一个同步一次；') }}
            </div>
          </template>
        </el-form-item>
        <el-form-item
          :label="$t('table.店铺属性')"
          prop="password"
        >
          <template v-if="currentRow.isCBT">
            {{$t('table.CBT')}}
          </template>
          <template v-else-if="currentRow.accountTypeNum === 4">
            {{ currentRow.siSiteName }}
          </template>
          <template v-else-if="currentRow.accountTypeNum === 6">
            <template v-if="currentRow.isTikTokUS === 1">
              {{$t('table.Local')}}
            </template>
            <template v-else>
              {{$t('table.跨境')}}
            </template>
          </template>
          <template v-else-if="currentRow.accountTypeNum === 8">
            {{$t('table.跨境')}}
          </template>
          <template v-else>
            {{$t('table.Local')}}
          </template>

        </el-form-item>
        <el-form-item
          :label="$t('table.bindingTime')"
          prop="createTime"
        >
          {{ currentRow.createTime }}
        </el-form-item>
        <el-form-item
          :label="$t('account.totalStickerNumber')"
          prop="createTime"
        >
          {{ currentRow.stickerOrderNum }}
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" :disabled="checkDisable()" @click="submitForm()" :loading="diaFormLoading">{{$t('common.save')}}</el-button>
          <el-button size="small" @click="dialogForm = false">{{$t('common.cancel')}}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      :title="''"
      :visible.sync="showStatementDialog"
      width="750px"
      custom-class="custom-dialog"
    >
      <div style="margin-top: -15px; margin-left: 30px; margin-right: 30px; font-size: 14px;">
        <div style="text-align: center; font-size: 20px; font-weight: bold;">{{ $t('自动同步前台库存风险提示') }}</div>
        <div style="margin-top: 15px;">{{ $t('在使用本系统的自动同步功能将库存数据同步到Mercado Libre、SHEIN平台时，请务必仔细阅读以下风险提示') }}:</div>
        <div style="margin-top: 15px; font-size: 16px; font-weight: bold;">{{ $t('1、功能说明') }}</div>
        <div style="margin-top: 15px;">{{ $t('自动同步前台库存功能，能够有效防止和降低因商品多链接销售而导致的超卖现象，从而提高库存管理效率和客户满意度。') }}</div>
        <div style="margin-top: 15px; font-size: 16px; font-weight: bold;">{{ $t('2、风险提示') }}</div>
        <div style="margin-top: 15px;">{{ $t('自动同步库存操作涉及高风险。库存数据的错误同步可能导致库存不准确、订单无法正常处理、销售损失以及客户投诉等问题。请确保在开启自动同步功能之前仔细核对库存数据的准确性，并定期检查同步结果。') }}</div>
        <div style="margin-top: 15px; font-size: 16px; font-weight: bold;">{{ $t('3、责任限制') }}</div>
        <div style="margin-top: 15px;">{{ $t('本系统仅作为库存管理和同步工具使用。我们不对任何因使用自动同步功能而导致的直接或间接损失承担责任，包括但不限于库存不准确、销售损失、客户投诉、业务中断等。') }}</div>
        <div>{{ $t('用户在开启和使用自动同步功能时，应自行承担所有风险。我们强烈建议用户在使用自动同步功能前，备份所有相关数据，并确保库存数据的准确性。') }}</div>
        <div style="margin-top: 15px; font-size: 16px; font-weight: bold;">{{ $t('4、使用指引') }}</div>
        <div style="margin-top: 15px;">{{ $t('请在开启自动同步功能前，确保系统设置和库存数据的准确性。如有任何疑问，请在开启功能前联系我们的技术支持团队获取帮助。') }}</div>
        <div>{{ $t('我们建议用户在首次开启自动同步功能时，密切监控同步结果，确保数据同步正确无误。') }}</div>
        <div style="margin-top: 15px; font-size: 16px; font-weight: bold;">{{ $t('5、数据备份') }}</div>
        <div style="margin-top: 15px;">{{ $t('用户有责任确保在开启自动同步功能前对所有库存数据进行全面备份。我们不对因用户未备份数据而导致的任何数据丢失或损坏承担责任。') }}</div>
        <div style="margin-top: 15px; font-size: 16px; font-weight: bold;">{{ $t('6、技术支持') }}</div>
        <div style="margin-top: 15px;">{{ $t('如在自动同步过程中遇到任何技术问题，请及时联系系统技术支持团队。我们将尽力提供必要的协助。') }}</div>
        <div style="margin-top: 15px;">{{ $t('通过开启本系统的自动同步功能，您表示已阅读、理解并同意以上内容，若您不同意，请勿开启自动同步功能。') }}</div>
        <div style="margin-top: 15px; display: flex; justify-content: center;">
          <el-button size="medium" @click="showStatementDialog = false">{{$t('关闭')}}</el-button>
        </div>
      </div>
    </el-dialog>

    <el-dialog
      class="auth-dialog"
      :visible.sync="dialogCollect"
      width="800px"
    >
      <div class="content" >
        <div class="img">
          <img src="@/assets/images/collect.png" alt="" >
        </div>
        <div>
          <p>{{$t('account.collectingText1')}}</p>
          <p>{{$t('account.collectingText2')}}</p>
          <p>{{$t('account.collectingText3')}}</p>
          <el-progress style="margin-top: 10px" :text-inside="true" :stroke-width="26" :percentage="collectRow.percentage"></el-progress>
        </div>

      </div>
    </el-dialog>

    <el-dialog
      class="bind-dialog"
      :visible.sync="bindDialog"
      :width="platformDialogWidth"
    >
      <div class="title">
        {{$t('auth.selectTheStorePlatform')}}
      </div>
      <div class="content" >
        <div
          v-for="(platformItem,index) in currentPlatformList"
          :key="index"
          class="platform-item"
          @click="platformItem.method"
        >
          <div class="platform-name">{{platformItem.name}}</div>
          <div class="platform-logo" :style="platformItem.imgStyle">
            <img :src="platformItem.image" alt="">
          </div>
          <div class="platform-tag" v-if="platformItem.tag">
            <el-tag :type="platformItem.tagType">{{ platformItem.tag }}</el-tag>
          </div>
        </div>

      </div>
    </el-dialog>

    <el-dialog
      class="falabella-auth-dialog"
      :visible.sync="falabellaDialog"
      width="800px"
    >
      <div slot="title">
        <div class="title">
          <span style="color: #FF7200">Falabella</span>
          <span> {{$t('auth.auth')}}</span>
        </div>
      </div>
      <div class="content">
        <div class="title2">
          {{$t('auth.falabellaAuthText1')}}
        </div>
        <div class="form">
          <el-form ref="falabellaForm" :model="falabellaForm" :rules="falabellaRules"  label-position="left" label-width="80px" label-suffix=":">
            <el-form-item
              label="Email"
              prop="email"
            >
              <el-input v-model="falabellaForm.email"></el-input>
            </el-form-item>
            <el-form-item
              label="API Key"
              prop="apiKey"
            >
              <el-input v-model="falabellaForm.apiKey"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="tips-img">
          <img src="@/assets/images/falabella-auth-tips.png" alt="">
          <span class="tips-text" v-html="$t('auth.falabellaAuthText2')"></span>
        </div>
      </div>
      <div class="footer">
        <el-button size="medium" type="orange" @click="submitFalabellaAuth" :loading="falabellaLoading">{{$t('auth.Authorized Store')}}</el-button>
      </div>

    </el-dialog>

    <el-dialog
      class="falabella-auth-dialog"
      :visible.sync="amazonDialog"
      width="800px"
    >
      <div slot="title">
        <div class="title">
          <span style="color: #FF7200">Amazon</span>
          <span> {{$t('auth.auth')}}</span>
        </div>
      </div>
      <div class="content">
        <div class="form">
          <el-form ref="amazonForm" :model="amazonForm" label-position="left" label-width="130px" label-suffix=":">
            <el-form-item
              label="Application ID"
              prop="application_id"
            >
              <el-input v-model="amazonForm.application_id"></el-input>
            </el-form-item>
            <el-form-item
              label="Client ID"
              prop="client_id"
            >
              <el-input v-model="amazonForm.client_id"></el-input>
            </el-form-item>
            <el-form-item
              label="Client Secret"
              prop="client_secret"
            >
              <el-input v-model="amazonForm.client_secret"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="footer">
        <el-button size="medium" type="orange" @click="submitAmazonAuth" :loading="amazonLoading">{{$t('auth.Authorized Store')}}</el-button>
      </div>

    </el-dialog>

  </div>
</template>

<script>
import {
  getAccountList,
  editAccount,
  getAccountPercentage,
  authFalabellaAccount,
  getFaAccountPercentage,
  getAccountPercentageV2,
  getSpAuthUrl,
  getShAuthUrl,
  getSiAuthUrl,
  getAwsAuthUrl,
  getTikTokUSAuthUrl,
  getTikTokAuthUrl,
  getAliexpressAuthUrl,
} from "@/api/account";
import {getAppName} from "@/utils/settings";
import {attrNumber} from "@/utils/common";
import {
  deepCopy, getAliexpressName, getAmazonName,
  getFalabellaName,
  getMercadoName,
  getPlatformTextColor,
  getSheinName,
  getSHEINName,
  getShopeeName, getTikTokName
} from "@/utils";
import {mkdAuth, mkdCBTAuth} from "@/utils/auth";
export default {
  name: "accountAuth",
  components:{
  },
  computed:{
    data(){
      const data = [];
      this.tableData.forEach(item=>{
        data.push(item)
      })
      return data;
    },
    // 当前的平台
    currentPlatformList(){
      return this.platformList.filter(item=>{
        return item.siteId.includes(this.$store.getters.siteId)
      })
    },
    platformDialogWidth(){
      let width = 50;
      width += 260 * this.currentPlatformList.length // 每一个div宽度是250
      return width + 'px';
    }
  },
  data(){
    return {
      business:{
        avatar: '',
        account: '',
        name: '',
      },
      systemPlatformList: [],
      showStatementDialog:false,
      loading: false,
      diaFormLoading: false,
      dialogCollect: false,
      dialogForm: false,
      accountNum: 0,
      avatar: '',
      tableData:[],
      getAppName,
      currentRow:{
        id: '',
        accountId: '',
        nickname: '',
        remarkName: '',
        stickerOrderNum: '',
        syncData: '',
        createTime: '',
        isCBT: 0,
        autoDownloadShipping: false,
        autoSyncInventory: false,
        autoSyncInventoryPlatformList: [],
        autoSyncInventoryNum: 30,
        isTikTokUS: 0,
      },
      collectRow:{
        accountId: '',
        percentage: 0,
        accountTypeNum: 1,
      },
      aliData: [],
      bindDialog: false,
      falabellaDialog: false,
      falabellaForm: {
        email: '',
        apiKey: '',
      },
      falabellaRules: {
        email : [{ required: true, trigger: 'blur', message: this.$t('common.pleaseFillIn') }],
        apiKey: [{ required: true, trigger: 'blur', message: this.$t('common.pleaseFillIn') }]
      },
      falabellaLoading: false,
      amazonDialog: false,
      amazonForm: {
        application_id: '',
        client_id: '',
        client_secret: '',
      },
      amazonLoading: false,
      platformList: [
        {
          name: getMercadoName(),
          tag: '本土店铺', // 左上角标签
          tagType: 'success', // 标签类型
          image: require('@/assets/images/mercado-logo.png'),
          imgStyle: '',
          method: this.jumpMKDAuth, // 点击触发的方法
          siteId: ['MX', 'BR', 'CL'], // 显示的站点
        },
        {
          name: getMercadoName(),
          tag: 'CBT店铺', // 左上角标签
          tagType: 'primary', // 标签类型
          image: require('@/assets/images/mercado-logo.png'),
          imgStyle: '',
          method: this.bindMoreCBTAccount, // 调整的方法
          siteId: ['MX'], // 显示的站点
        },
        {
          name: getFalabellaName(),
          tag: '',
          tagType: '',
          image: require('@/assets/images/falabella-logo.png'),
          imgStyle: '',
          method: this.falabellaAuth,
          siteId: ['CL'],
        },
        {
          name: getShopeeName(),
          tag: '',
          tagType: '',
          image: require('@/assets/images/shopee-logo.jpg'),
          imgStyle: '',
          method: this.shopeeAuth,
          siteId: ['BR'],
        },
        {
          name: getSheinName(),
          tag: '',
          tagType: '',
          image: require('@/assets/images/shein-logo.png'),
          imgStyle: '',
          method: this.sheinAuth,
          siteId: ['MX'],
        },
        {
          name: getAmazonName(),
          tag: '',
          tagType: '',
          image: require('@/assets/images/amazon-logo.png'),
          imgStyle: '',
          method: this.amazonAuth,
          siteId: [],
        },
        {
          name: getTikTokName(),
          tag: 'US-本土商家',
          tagType: 'success',
          image: require('@/assets/images/tiktok.svg'),
          imgStyle: 'margin-left: 50px;',
          method: this.tiktokUSAuth,
          siteId: ['MX', 'BR', 'CL'],
        },
        {
          name: getTikTokName(),
          tag: 'US-中国收益人',
          tagType: 'primary',
          image: require('@/assets/images/tiktok.svg'),
          imgStyle: 'margin-left: 50px;',
          method: this.tiktokAuth,
          siteId: ['MX', 'BR', 'CL'],
        },
      ],

      queryParams: {
        orderBy: '',
        orderField: '',
      },

      sortOrders: ['descending', 'ascending', null],

      defaultSort:{
        prop: 'stickerOrderNum',
        order: 'descending'
      },

    }
  },
  created() {
    this.queryParams.orderBy = this.defaultSort.order
    this.queryParams.orderField = this.defaultSort.prop
    this.getData();
    setInterval(()=>{0
      if(this.dialogCollect){
        this.loopPercentage();
      }
    },3000);

    if (process.env.VUE_APP_ALIEXPRESS === 'true') {
      this.platformList.push(
        {
          name: getAliexpressName(),
          tag: '跨境店铺', // 左上角标签
          tagType: 'primary', // 标签类型
          image: require('@/assets/images/aliexpress.png'),
          imgStyle: '',
          method: this.aliexpressAuth,
          siteId: ['MX'],
        }
      )
    }

  },
  methods:{
    getPlatformTextColor,
    getShopeeName,
    getFalabellaName,
    getMercadoName,
    getSheinName,
    getAmazonName,
    getTikTokName,
    attrNumber,
    getData(){
      this.loading = true
      getAccountList(this.queryParams).
        then(res=>{
          this.loading = false
          this.tableData = res.data
          this.systemPlatformList= deepCopy(res.info.platformList)

      })
    },
    //排序
    handleSortChange(column){
      this.queryParams.orderBy = ''
      this.queryParams.orderField = ''
      if(column.order){
        this.queryParams.orderBy = column.order
        this.queryParams.orderField = column.prop
      }
      this.getData()
    },
    showInfo(row){
      // 如果采集完成了 显示对应的详情 否则显示采集进度
      if(row.syncData){
        this.currentRow = deepCopy(row)
        this.dialogForm = true
      }else{
       this.collectRow.accountId = row.accountTypeNum === 1 ? row.accountId : row.id;
       this.collectRow.accountTypeNum = row.accountTypeNum;
       this.collectRow.percentage = 0;
       this.loopPercentage();
       this.dialogCollect = true;
      }
    },
    checkDisable(){
      const obj = this.data.find(item => item.id === this.currentRow.id)
      return JSON.stringify(obj) === JSON.stringify(this.currentRow)
    },
    // 提交修改店铺名称
    submitForm(){
      this.$refs.accountForm.validate(valid=>{
        if(valid){
          const postData = this.currentRow;
          this.diaFormLoading = true;
          editAccount(postData).then(res=>{
            this.diaFormLoading = false;
            if(res.error === 0){
              this.dialogForm = false;
              this.$successMessage(res.message)
              this.getData()
            }else{
              this.$errorMessage(res.message)
            }
          })
        }
      })
    },
    // 循环去请求进度
    async loopPercentage(){
      let func = this.collectRow.accountTypeNum === 1 ? getAccountPercentage : getFaAccountPercentage;
      await getAccountPercentageV2(this.collectRow.accountId).then(res=>{
        this.collectRow.percentage = res.data.progress
        if(this.collectRow.percentage >= 100){
          // 如果授权完成 刷新当前页面
          this.$router.go(0)
        }
      })
    },
    // 绑定更多店铺
    bindMoreAccount(){
      if(this.$store.getters.siteId === 'CL'){
        this.bindDialog = true;
      }else if(this.$store.getters.siteId === 'BR'){
        this.bindDialog = true;
      }else if(this.$store.getters.siteId === 'MX'){
        this.bindDialog = true;
        // mkdAuth()
      }else{
        mkdAuth()
      }
    },
    // 绑定本土店
    bindMoreCBTAccount(){
      mkdCBTAuth()
    },
    // 跳转到美客多授权
    jumpMKDAuth(){
      this.bindDialog = false;
      mkdAuth()
    },
    // 跳转到falabella授权
    falabellaAuth(){
      this.bindDialog = false;
      this.falabellaDialog = true;
    },
    // 提交授权的信息
    submitFalabellaAuth(){
      this.$refs.falabellaForm.validate(valid =>{
        if(valid){
          this.falabellaLoading = true;
          authFalabellaAccount(this.falabellaForm)
            .then(res=>{
              this.falabellaLoading = false;
              if(res.error === 0){
                this.falabellaDialog = false;
                this.$successMessage(res.message)
                this.$router.go(0) // 刷新页面
              }else{
                this.$errorMessage(res.message)
              }
            })
        }
      })
    },
    shopeeAuth(){
      getSpAuthUrl()
        .then(res=>{
          let redirectUrl = res.data.url
          window.open(redirectUrl ,'_blank')
        })
    },
    sheinAuth(){
      getSiAuthUrl()
        .then(res=>{
          let redirectUrl = res.data.url
          window.open(redirectUrl ,'_blank')
        })
    },
    tiktokUSAuth(){
      getTikTokUSAuthUrl()
        .then(res=>{
          let redirectUrl = res.data.url
          window.open(redirectUrl ,'_blank')
        })
    },
    tiktokAuth(){
      getTikTokAuthUrl()
        .then(res=>{
          let redirectUrl = res.data.url
          window.open(redirectUrl ,'_blank')
        })
    },
    amazonAuth(){
      this.bindDialog = false;
      this.amazonDialog = true;
    },
    aliexpressAuth(){
      getAliexpressAuthUrl()
        .then(res=>{
          let redirectUrl = res.data.url
          window.open(redirectUrl ,'_blank')
        })
    },
    showStatement(){
      this.showStatementDialog = true
    },
    submitAmazonAuth(){
      this.amazonLoading = true;
      getAwsAuthUrl(this.amazonForm)
        .then(res=>{
          this.amazonDialog = false;
          this.amazonLoading = false;
          let redirectUrl = res.data.url
          window.open(redirectUrl ,'_blank')
        })
    },
  }
}
</script>
<style lang="scss">

</style>

<style scoped lang="scss">

.wrap{
  padding:20px 30px;
  min-height: calc(100vh - 100px);
  //background: #fafafb;
  .recharge-log{
    width: 1000px;
    min-height: calc(100vh - 100px);
    padding: 20px 50px;
    background:#ffffff;
  }
}
.header-card{
  width: 100%;
  height: 80px;
  border: 1px solid #d7d7d7;
  border-radius: 3px;
  .left{
    float: left;
    .avatar{
      float: left;
      margin-left: 10px;
      margin-top: 10px;
      img{
        width: 60px;
        height: 60px;
        object-fit: cover;
        border-radius: 50%;
      }
    }
    .user{
      font-size: 14px;
      margin-top: 10px;
      margin-left: 20px;
      float: left;
      line-height: 30px;
      .user-text-1{
        font-weight: 500;
      }
    }
  }
  .right{
    float: right;
    height: 100%;
    padding: 5px 10px;
    background: #ff7d0a;
    border-radius: 3px;
    border: 1px solid #ff7d0a;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .text1{
      font-weight: 650;
      font-size: 14px;
    }
    .text2{
      font-weight: 700;
      font-size: 19px;
    }
    .text3{
      font-weight: 400;
      font-size: 11px;
    }
  }
}
.recharge-content{
  margin-top: 20px;
  .recharge-header{
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
  }
}


.auth-dialog{
  .content{
    margin: 0 auto;
    width: 600px;
    padding: 30px 0;
    .img{
      text-align: center;
    }
    p{
      margin: 0;
      padding: 0;
      line-height: 20px;
      font-weight: 650;
      color: #1E3369;
      font-size: 13px;
      text-align: center;
    }
  }

}
.country-list{
  display: flex;
  justify-content: center;
  margin-top: 20px;
  .country-button{
    padding: 5px 15px;
    .button-content{
      display: flex;
      align-items: center;
      .country-img{
        display: inline;
        width: 20px;
        line-height: 30px;
        margin-right: 5px;
      }
    }
  }
}
.bind-dialog{
  .title{
    font-size: 20px;
    font-weight: bold;
    //text-align: center;
    margin-bottom: 20px;
    margin-top: -40px;
  }
  .content{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .platform-item{
      width: 250px;
      height: 150px;
      border: 1px solid #cccccc;
      border-radius: 3px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      .platform-name{
        font-size: 16px;
        font-weight: 500;
        text-align: center;
        margin-bottom: 10px;
      }
      .platform-logo{
        text-align: center;
        img{
          width: 200px;
        }
      }
      .platform-tag{
        position: absolute;
        left: 0;
        top: 0;
      }
    }
    .platform-item:hover{
      background-color: #F5F7FA;
    }
  }
}
.falabella-auth-dialog{
  .title{
    font-size: 16px;
    font-weight: 600;
  }
  .content{
    margin-top: -20px;
    .form{
      margin-top: 20px;
    }
    .tips-img{
      img{
        width: 770px;
      }
      .tips-text{
        color: #AAAAAA;
        font-size: 13px;
        .strong-tips{
          color: #FF0000;
        }
      }
    }
  }
  .footer{
    margin-top: 40px;
  }
}
</style>
